/* Popover 弹出框(图标选择器)
------------------------------- */
.icon-selector-popper {
	padding: 0 !important;
	border-radius: 4px !important;
	box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1) !important;
	border: 1px solid var(--el-border-color-light) !important;
	background: var(--el-bg-color) !important;

	.icon-selector-warp {
		height: 260px;
		overflow: hidden;
		position: relative;
		background: var(--el-bg-color);
		border-radius: 4px;

		.icon-selector-warp-title {
			position: absolute;
			height: 50px;
			line-height: 50px;
			left: 20px;
			font-size: 14px;
			font-weight: 500;
			color: var(--el-text-color-primary);
			z-index: 1;
		}

		.el-tabs__header {
			display: flex;
			justify-content: flex-end;
			padding: 0 20px;
			border-bottom: 1px solid var(--el-border-color-light);
			margin: 0 !important;
			background: var(--el-bg-color);
			height: 50px;
			align-items: center;

			.el-tabs__nav-wrap {
				&::after {
					height: 0 !important;
				}

				.el-tabs__nav {
					background: var(--el-fill-color-blank);
					border-radius: 6px;
					padding: 3px;
					border: 1px solid var(--el-border-color-lighter);
				}

				.el-tabs__item {
					padding: 0 16px !important;
					font-size: 13px;
					font-weight: 500;
					color: var(--el-text-color-regular);
					border-radius: 4px;
					margin: 0 1px;
					transition: all 0.3s ease;
					height: 28px;
					line-height: 28px;
					text-align: center;
					border: none;
					min-width: 50px;

					&:hover {
						background: var(--el-fill-color-light);
						color: var(--el-text-color-primary);
					}

					&.is-active {
						background: var(--el-color-primary);
						color: var(--el-color-white);
						box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
						font-weight: 500;
					}
				}
			}
		}

		.el-tabs__content {
			padding: 0;
			height: calc(100% - 50px);
			background: var(--el-bg-color);
		}
	}
}